const boxes = document.querySelectorAll('.box');
const indicators = document.querySelectorAll('.indicator');

let currentIndex = 0;

function showSlide(index) {
  boxes.forEach((box, i) => {
    if (i === index) {
      box.style.display = 'block';
    } else {
      box.style.display = 'none';
    }
  });
  indicators.forEach((indicator, i) => {
    if (i === index) {
      indicator.classList.add('active');
    } else {
      indicator.classList.remove('active');
    }
  });
}

function nextSlide() {
  currentIndex = (currentIndex + 1) % boxes.length;
  showSlide(currentIndex);
}

function prevSlide() {
  currentIndex = (currentIndex - 1 + boxes.length) % boxes.length;
  showSlide(currentIndex);
}

indicators.forEach((indicator, index) => {
  indicator.addEventListener('click', () => {
    currentIndex = index;
    showSlide(currentIndex);
  });
});

setInterval(nextSlide, 3000);

showSlide(currentIndex);
